<template>
  <div class="FactoryOverview">
    <div class="leftFactory">
      <div class="conList second">
        <p class="conTitle">
          <span>人员详情统计</span>
        </p>
        <ul class="conMain">
          <li>
            <p><span>90</span></p>
            <p>标准</p>
            <p class="sctsIcon1"></p>
          </li>
          <li>
            <p><span>46</span></p>
            <p>当班人员</p>
            <p class="sctsIcon2"></p>
          </li>
          <li>
            <p><span>18</span></p>
            <p>高级工程师</p>
            <p class="sctsIcon3"></p>
          </li>
        </ul>
      </div>
      <div class="conList first">
        <p class="conTitle">
          <span>设备状态</span>
        </p>
        <div class="conMain">
          <div class="productionEquipment" ref="energyRef"></div>
        </div>
      </div>
      <div class="conList third">
        <p class="conTitle">
          <span>设备提示</span>
        </p>
        <div class="conMain">
          <div class="titleBox">
            <div class="title">
              <p>
                总事件
                <span>2590</span>
              </p>
            </div>
            <div class="title">
              <p>
                今日事件
                <span>12</span>
              </p>
            </div>
          </div>
          <ul class="tableBox">
            <li>
              <p class="icon"></p>
              <p>xxx设备283919 发生告警，请尽快处理!</p>
              <p>2019-02-10 21:00</p>
            </li>
            <li>
              <p class="icon"></p>
              <p>xxx设备283919 发生告警，请尽快处理!</p>
              <p>2019-02-10 21:00</p>
            </li>
            <li>
              <p class="icon"></p>
              <p>xxx设备283919 发生告警，请尽快处理!</p>
              <p>2019-02-10 21:00</p>
            </li>
            <li>
              <p class="icon"></p>
              <p>xxx设备283919 发生告警，请尽快处理!</p>
              <p>2019-02-10 21:00</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="centerMain">
      <ul class="topMain">
        <li>
          <p>综合利用率</p>
          <p><span>96</span>%</p>
        </li>
        <li>
          <p>故障率</p>
          <p><span>82</span>%</p>
        </li>
        <li>
          <p>设备总数</p>
          <p><span>96</span>台</p>
        </li>
        <li>
          <p>设备待机</p>
          <p><span>3</span>台</p>
        </li>
        <li>
          <p>设备在线</p>
          <p><span>13</span>台</p>
        </li>
        <li>
          <p>软件告警中</p>
          <p><span>1</span>台</p>
        </li>
        <li>
          <p>硬件告警中</p>
          <p><span>0</span>台</p>
        </li>
      </ul>
      <div class="picInfoBox">
        <p class="title">码垛机器人MDJ-28</p>
        <div class="infoTxtBox">
          <div class="imgs"><img src="../../assets/img/pic4.png" /></div>
          <div class="rightBox">
            <p class="box1"></p>
            <p class="txtTop">AI诊断结论：设备运行正常</p>
            <p class="box2"></p>
            <p class="topTitle">码垛机器人</p>
            <div class="txtType">
              <p>设备类别：<span>搬运</span></p>
              <p>使用部门：<span>原料仓1部</span></p>
            </div>
            <ul class="timeHour">
              <li>
                <p>累积运行时长</p>
                <p><span>356</span>h</p>
              </li>
              <li>
                <p>累计停机时长</p>
                <p><span>356</span>h</p>
              </li>
            </ul>
            <ul class="timeYear">
              <li>
                <p>最近巡检时间</p>
                <p><span>2025/2/27 15:27</span></p>
              </li>
              <li>
                <p>最近维护时间</p>
                <p><span>2025/2/27 15:27</span></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bottomMain">
        <el-carousel :autoplay="false" arrow="always" indicator-position="none">
          <el-carousel-item v-for="item in listArr" :key="item">
            <ul class="listImg">
              <li v-for="imgs in item" :key="imgs">
                <img :src="imgs.img" />
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="rightFactory">
      <ul class="rightF1">
        <li class="button">
          <p>累计运行时长</p>
          <p><span>84875天71小时</span></p>
        </li>
        <li class="button">
          <p>累计停机时间</p>
          <p><span>84小时</span></p>
        </li>
      </ul>
      <div class="rightF2 rightStyles conList">
        <p class="conTitle">
          <span>AI预测维护</span>
        </p>
        <div class="con">
          <ul class="topTip">
            <li>
              已预测故障
              <span>564</span>
              次
            </li>
            <li>
              待处理预警
              <span>2</span>
              次
            </li>
          </ul>
          <div class="proBox">
            <div class="txtTip">
              <p>462</p>
              问题总数
            </div>
            <div class="productionEquipment" ref="productionEquipmentRef"></div>
            <ul class="rightTip">
              <li>机械性故障</li>
              <li>腐蚀性故障</li>
              <li>硬件故障</li>
              <li>软件故障</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="rightF3 conList">
        <p class="conTitle">
          <span>设备健康综合评分</span>
        </p>
        <div class="yieldBox">
          <div class="yieldList" ref="yieldRef"></div>
        </div>
      </div>
      <div class="rightF4 rightStyles conList">
        <p class="conTitle">
          <span>巡检计划</span>
        </p>
        <ul class="lastBox">
          <li class="jr">
            <p>今日巡检数量</p>
            <p><span>18</span>/33</p>
            <p class="dz1"></p>
          </li>
          <li class="rw">
            <p>任务完成率</p>
            <p><span>82.7</span>%</p>
            <p class="dz2"></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel } from 'element-plus'
let statusTable = ref('on')
let yieldList = null
let energyList = null
let productionEquipmentList = null
const productionEquipmentRef = ref(null)
const yieldRef = ref(null)
const energyRef = ref(null)
import img1 from '../../assets/img/bg1.png'
import img2 from '../../assets/img/bg2.png'
import img3 from '../../assets/img/bg3.png'
import img4 from '../../assets/img/pic1.jpg'
import img5 from '../../assets/img/pic2.jpg'
import img6 from '../../assets/img/pic3.jpg'
const listArr = ref([
  [
    { img: img5 },
    { img: img4 },
    { img: img6 }
  ],
  [
    { img: img6 },
    { img: img5 },
    { img: img4 }
  ],
  [
    { img: img6 },
  ],
])


// 能耗监测
const getEnergyInit = () => {
  let option = {
    tooltip: {
      backgroundColor: '#010e1c',
      borderWidth: 0,
      formatter: function (params, val) {
        debugger
        return `<div style="min-width:50px;background-color:#010e1c;border-width:0">
          <p style="color: #fff;">${params.name}</p>
          <p style="padding:2px 0;display: flex;start: space-between;align-items: center;">
          <span style="display: flex;align-items: center;"><i style="display:inline-block;width:4px;height:4px;background-color: #0ECB81;margin-right:6px;"></i>
            </span>
          <span style="font-size: 12px;">
          ${params.seriesName} 
          </span>
          <span style="font-size: 12px;color: #fff;margin-left: 8px;">
           ${params.value}
          </span>
          </p>
      </div>`
      }
    },
    legend: {
      data: ['离线', '在线'],
      itemWidth: 8,  // 设置宽度
      itemHeight: 8, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#96b2d2',
        fontSize: 10
      },
      left: '2%',
      top: '1%',
    },
    grid: {
      top: '30px',
      left: '10%',
      right: '4%',
      bottom: '15%',
    },
    xAxis: [
      {
        type: 'category',
        data: ['AGV', '堆垛机器人', '安防', '电表', '温度'],
        axisLabel: {
          color: '#adc2d0',
          fontSize: 8
        }
      }
    ],
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: '#2d3d4f'
          }
        },
        type: 'value',
        axisLabel: {
          color: '#adc2d0',
          fontSize: 8
        }
      }
    ],
    series: [
      {
        name: '在线',
        type: 'bar',
        stack: 'Ad',
        barWidth: 12,
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0b2c65' },
            { offset: 1, color: '#1597fc' }
          ])
        },
        showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 10,
            y: 0,
            x2: 10,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderType: 'solid',
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderWidth: 20,
          opacity: '0.12'
        }
      },
      {
        name: '离线',
        type: 'bar',
        stack: 'Ad',
        barWidth: 12,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f5af00' },
            { offset: 1, color: '#f6b000' }
          ])
        },
        showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 10,
            y: 0,
            x2: 10,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderType: 'solid',
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderWidth: 20,
          opacity: '0.12'
        },
        data: [220, 182, 191, 234, 290]
      },
    ]
  }
  energyList.setOption(option, true)
  window.addEventListener("resize", resize)
}
// 生产设备
const getProductionEquipmentInit = () => {
  let option = {
    // tooltip: {
    //   trigger: 'item'
    // },
    series: [
      {
        name: '能耗监测',
        type: 'pie',
        radius: ['150%', '180%'],
        center: ['50%', '100%'],
        avoidLabelOverlap: false,
        startAngle: 180,
        endAngle: 360,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 55, name: '机械性故障' },
          { value: 25, name: '腐蚀性故障' },
          { value: 10, name: '硬件故障' },
          { value: 10, name: '软件故障' },
        ],
        color: ['#2d9bfc', '#d0deee', '#ffc97a', '#098e3d']
      }
    ]
  }
  productionEquipmentList.setOption(option, true)
  window.addEventListener("resize", resize)
}
const getYieldInit = () => {
  let option = {
    xAxis: {
      type: 'category',
      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6'],
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      max: 900,
      interval: 300,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    grid: {
      top: '28px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
    series: [
      {
        data: [120, 290, 502, 801, 534, 330],
        type: 'line',
        symbol: 'none',
        smooth: true,
        areaStyle: {
          color: "rgba(25,120,229,0.2)",
        },
        name: '标准值'
      }
    ]
  }
  yieldList.setOption(option, true)
  window.addEventListener("resize", resize)
}


const resize = () => {
  yieldList.resize()
  energyList.resize()
  productionEquipmentList.resize()
}
const echartsInit = () => {
  productionEquipmentList = echarts.init(productionEquipmentRef.value)
  yieldList = echarts.init(yieldRef.value)
  energyList = echarts.init(energyRef.value)
}
onMounted(() => {
  echartsInit()
  getYieldInit()
  getEnergyInit()
  getProductionEquipmentInit()
});
</script>

<style scoped lang="less">
.FactoryOverview {
  display: flex;
  justify-content: space-between;
  background: url(../../assets/img/bg2.png) no-repeat;
  background-size: 100% 100%;
  .leftFactory {
    margin-top: -20px;
    .conList {
      width: 530px;
    }
    .first {
      height: 326px;
      background: rgba(1, 27, 55, 0.6);
      margin: 20px 0;
      .conMain {
        display: flex;
        padding: 12px;
      }
      .productionEquipment {
        width: 530px;
        height: 250px;
      }
    }
    .second {
      height: 266px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        width: 520px;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 55px;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          line-height: 24px;
          font-size: 12px;
          gap: 5px;
          p {
            color: #f1f2f3;
            font-size: 16px;
            &:last-child {
              width: 90px;
              height: 85px;
            }
            span {
              color: #66ffff;
              font-size: 40px;
            }
          }
          .sctsIcon1 {
            background: url(../../assets/img/inventory11.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon2 {
            background: url(../../assets/img/inventory12.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon3 {
            background: url(../../assets/img/inventory13.png) no-repeat center;
            background-size: contain;
          }
        }
      }
    }
    .third {
      height: 300px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        .titleBox {
          display: flex;
          justify-content: flex-end;
          .title {
            display: flex;
            justify-content: end;
            padding-right: 30px;
            padding-top: 5px;
          }
          p {
            width: 124px;
            height: 36px;
            background: rgba(216, 240, 255, 0.1);
            border-left: 1px solid #6e7a83;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 24px;
              color: #00f6ff;
              margin: 0 5px;
            }
          }
        }
      }
      .tableBox {
        padding: 10px;
        height: 180px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        li {
          display: flex;
          margin-bottom: 2px;
          align-items: center;
          justify-content: center;
          gap: 5px;
          color: #d0deee;
          p {
            font-size: 16px;
            padding: 8px 0 0px 10px;
            display: flex;
            align-items: center;
            justify-content: start;
            &:nth-child(2) {
              width: 300px;
            }
            &:last-child {
              color: #7f8893;
            }
          }
          .icon {
            width: 20px;
            height: 20px;
            background: url(../../assets/img/warring1.png) no-repeat;
            background-size: contain;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .centerMain {
    width: 776px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
    .topMain {
      width: 776px;
      height: 91px;
      display: flex;
      align-items: center;
      gap: 7px;
      li {
        width: 105px;
        height: 78px;
        padding-left: 20px;
        color: #b3bcc5;
        background: url(../../assets/img/kuang.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
          white-space: nowrap;
        }
        span {
          color: #fff;
          text-shadow: 0px 0px 4px #00a7ff;
          font-size: 30px;
          margin-right: 2px;
        }
      }
    }

    .bottomMain {
      width: 776px;
      height: 180px;
      :deep .el-carousel {
        width: 744px;
        height: 180px;
        margin-left: 19px;
        .el-carousel__arrow {
          background-color: #2e3236;
          width: 22px;
          height: 180px;
          border-radius: 0;
        }
        .el-carousel__arrow--left {
          left: 0;
        }
        .el-carousel__arrow--right {
          right: 0;
        }
      }
    }
  }
  .rightFactory {
    width: 530px;
    margin-top: -26px;
    .rightF1 {
      width: 530px;
      height: 144px;
      background: url(../../assets/img/right1.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      gap: 15px;
      align-items: center;
      justify-content: center;
      .button {
        width: 243px;
        height: 102px;
        background: url(../../assets/img/buttonRight.png) no-repeat;
        background-size: 100% 100%;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        p {
          font-size: 14px;
          span {
            font-size: 24px;
            color: #fff;
            text-shadow: 0px 0px 4px #00a7ff;
            margin-right: 3px;
          }
        }
      }
    }
    .conList {
      margin-top: 15px;
      background: rgba(1, 27, 55, 0.6);
    }
    .rightStyles {
      .con {
        display: flex;
        flex-direction: column;
      }
    }
    .rightF2 {
      width: 530px;
      height: 276px;
      .con {
        gap: 20px;
        height: 200px;
        padding: 5px 20px;
        .topTip {
          display: flex;
          color: #b4bcc4;
          height: 65px;
          background: url(../../assets/img/center2.png) no-repeat bottom;
          background-size: 100% 100%;
          align-items: center;
          justify-content: center;
          gap: 70px;
          li {
            display: flex;
            align-items: center;
          }
          span {
            font-size: 42px;
            color: #fff;
            margin: 0 5px;
            text-shadow: 0px 0px 4px #00a7ff;
          }
        }
      }
      .proBox {
        position: relative;
        .txtTip {
          position: absolute;
          text-align: center;
          width: 221px;
          height: 110px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          left: 20px;
          top: 15px;
          color: #6d7985;
          p {
            font-size: 28px;
            color: #fff;
          }
        }
        .rightTip {
          position: absolute;
          right: 60px;
          top: 0px;
          height: 110px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #b8c6cb;
          line-height: 26px;
          li {
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              position: absolute;
              left: -15px;
              top: 10px;
            }
            &:nth-child(1) {
              &::after {
                background-color: #2d9bfc;
              }
            }
            &:nth-child(2) {
              &::after {
                background-color: #d0deee;
              }
            }
            &:nth-child(3) {
              &::after {
                background-color: #ffc97a;
              }
            }
            &:nth-child(4) {
              &::after {
                background-color: #098e3d;
              }
            }
          }
        }
        .productionEquipment {
          width: 221px;
          height: 110px;
          margin-left: 20px;
          background: url(../../assets/img/huan.png) no-repeat bottom;
          background-size: contain;
        }
      }
    }
    .rightF3 {
      width: 530px;
      height: 256px;
      .yieldList {
        width: 530px;
        height: 205px;
      }
      .yieldBox {
        position: relative;
        .title {
          padding: 3px 15px;
          background: rgba(216, 240, 255, 0.1);
          border-left: 1px solid #6e7a83;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 8%;
          top: 2%;
          span {
            font-size: 24px;
            color: #00f6ff;
            margin: 0 4px;
          }
        }
      }
    }
    .rightF4 {
      width: 530px;
      height: 226px;
      .lastBox {
        display: flex;
        justify-content: center;
        gap: 50px;
        li {
          width: 206px;
          height: 170px;
          background: url(../../assets/img/dz3.png) no-repeat center;
          background-size: contain;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p {
            width: 145px;
            font-size: 16px;
            color: #d4edfd;
            text-align: center;
            span {
              font-size: 30px;
            }
          }

          &.jr {
            p {
              &:nth-child(2) {
                font-size: 30px;
              }
            }
            span {
              color: #00f6ff;
              font-size: 42px;
            }
          }
          .dz1 {
            margin-top: -28px;
            height: 58px;
            background: url(../../assets/img/dz1.png) no-repeat center;
            background-size: contain;
          }
          .dz2 {
            margin-top: -28px;
            height: 58px;
            background: url(../../assets/img/dz2.png) no-repeat center;
            background-size: contain;
          }
        }
      }
    }
  }
}
.listImg {
  display: flex;
  gap: 20px;
  width: 700px;
  margin-left: 22px;
  li {
    width: 220px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.picInfoBox {
  width: 776px;
  height: 450px;
  background: url(../../assets/img/info1.png) no-repeat center;
  background-size: 100% 100%;
  position: relative;
  .title {
    width: 280px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../../assets/img/info2.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: -10px;
    left: 51%;
    transform: translate(-50%, -50%);
    color: #00f6ff;
    font-size: 20px;
    text-shadow: 0px 2px 4px rgba(0, 253, 255, 0.5);
  }
  .infoTxtBox {
    display: flex;
    height: 450px;
    padding-left: 20px;
    gap: 80px;
    font-size: 16px;
    color: #96a8c5;
    align-items: center;
    .imgs {
      width: 308px;
      height: 370px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .rightBox {
      width: 390px;
      height: 450px;
      padding-left: 4px;
      .box1 {
        height: 48px;
      }
      .box2 {
        height: 24px;
      }
      .txtTop {
        color: #00f6ff;
        font-size: 18px;
        height: 52px;
        display: flex;
        align-items: center;
        padding-left: 40px;
      }
      .topTitle {
        color: #ffffff;
        font-size: 20px;
        height: 48px;
        display: flex;
        align-items: center;
      }
      .txtType {
        height: 88px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 33px;
      }
      .timeHour {
        display: flex;
        gap: 60px;
        height: 92px;
        line-height: 26px;
        font-size: 14px;
        span {
          font-size: 20px;
          margin-right: 4px;
        }
      }
      .timeYear {
        display: flex;
        gap: 40px;
        align-items: center;
        line-height: 26px;
        height: 80px;
        margin-left: -15px;
        font-size: 14px;
        span {
          font-size: 16px;
        }
        li {
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 0.8333vw;
            height: 1.484vh;
            position: absolute;
            left: -25px;
            top: 10%;
            background: url(../../assets/img/info3.png) no-repeat center;
            background-size: contain;
          }
        }
      }
    }
    span {
      color: #ffffff;
    }
  }
}
</style>